<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟汽车仪表盘</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="gauge" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var timeTicket;
    /*
     * 读取echarts Option配置数据
    */
    $(function()
    {
        getOption();
    });
    /*
     * 读取echarts Option配置数据
     */
    var gaugeChart = echarts.init(document.getElementById('gauge'));// 初始化echarts对象为mapChart
    function getOption()
    {
        // echarts配置json文件的地址
        var chartUrl = "../../config/grid_gauge.json";
        // 读取echartsoption配置
        $.get(chartUrl, function (option)
        {
            if(option != null)
            {
                option.legend.data = ["速度","转速","油表","水表"];//图例data设置
                option.legend.left = "left";//图例x轴位置 左、中、右英文
                option.legend.y = "top";//图例y轴位置 上、中、下英文
                option.series[0].name = "速度";// 自定义图列名称
                option.series[1].name = "转速";// 自定义图列名称
                option.series[2].name = "油表";// 自定义图列名称
                option.series[3].name = "水表";// 自定义图列名称
                option.series[2].axisLabel.formatter = function(v)
                {
                    switch (v + '')
                    {
                        case '0' : return 'E';
                        case '1' : return 'Gas';
                        case '2' : return 'F';
                    }
                };// 设置内容展示
                option.series[3].axisLabel.formatter = function(v)
                {
                    switch (v + '')
                    {
                        case '0' : return 'H';
                        case '1' : return 'Water';
                        case '2' : return 'C';
                    }
                };// 设置内容展示
                window.clearInterval(timeTicket);
                timeTicket = setInterval(function ()
                {
                    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;// 设置业务数据
                    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;// 设置业务数据
                    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;// 设置业务数据
                    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;// 设置业务数据
                    gaugeChart.setOption(option);// 把加工好的mapOption注入echarts api
                },3000);
            }
        });
    }
</script>
</html>